<template>
  <div class="tabdetial">
    <Nav></Nav>
    <div class="banner-wrap">
      <img class="banner" :src="tabdetailBg" />
    </div>

   
    <div class="wrap">
      <div style="text-align:right;cursor:pointer;"  @click="goToRecord">历史记录</div>
      <div class="rules">
        <div class="title">规则介绍</div>
        <p>
          1，请您在页面选择真实学业水平考试成绩和高考选考科目，系统将自动为您推荐符合报考条件的高校。
        </p>

        <p>
          2，若想深入了解各高校的招生政策，专业等，可点击联系客服进行一对一进行咨询。
        </p>

        <p>
          3，特别申明：本智能推荐系统针对浙江三位一体高校推荐仅作为参考作用。
        </p>
      </div>
      <div class="smartRegistration-wrap-title">
        <span></span>学业水平考试成绩：
      </div>
      <div class="smartRegistration-box">
        <div
          class="smartRegistration-wrap"
          v-for="(item, index1) in smartRegistration"
          :key="item"
        >
          <div class="smartRegistration-wrap-item">
            <div class="smartRegistration-wrap-item-left">
              <img class="img" :src="smartRegistrationBg" />
              <div class="title">{{ item.title }}</div>
              <div class="subtitle">{{ item.enTitle }}</div>
            </div>
            <div class="smartRegistration-wrap-item-right">
              <img :src="smartRegistrationItem" />
              <div class="content-wrap">
                <div
                  @click="changeOptions(index1, project)"
                  v-for="project in item.options"
                  :key="project"
                  class="content"
                  :class="{ active: item.chooseOption == project }"
                >
                  {{ project }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="smartRegistration-wrap-title">
        <span></span>选考科目（七选三)：
      </div>
      <div class="smartRegistration-tects">
        <div
          v-for="item in projects"
          :key="item"
          :class="{ active: !!item.active }"
          class="smartRegistration-tects-items"
          @click="changeProject(item.name)"
        >
          {{ item.name }}
        </div>
      </div>

     <div class="btn" @click="submit">确定</div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script setup>
import Footer from '../../components/pc/Footer.vue';
import Nav from '../../components/pc/nav.vue';
import { Dialog } from 'vant';
import 'vant/es/dialog/style';
import { onMounted, ref, reactive } from 'vue';
import { getIntelligent } from '../../api/apiList/homePage.js';
import smartRegistrationBg from '../../assets/images/smartRegistration-bg.jpg';
import smartRegistrationItem from '../../assets/images/smartRegistration-item.jpg';
import tabdetailBg from '../../assets/pc/newTestPc-bg.png';
import { Notify } from 'vant';
import 'vant/es/notify/style';
import { useRouter } from 'vue-router';
const router = useRouter();
const currentItems = ref([]);
const smartRegistration = reactive([
  {
    title: '语文',
    enTitle: 'Chinese achievements',
    options: ['A', 'B', 'C', 'D', 'E'],
    subTitle: 'language',
    chooseOption: ''
  },
  {
    title: '数学',
    enTitle: 'Math scores',
    options: ['A', 'B', 'C', 'D', 'E'],
    subTitle: 'math',
    chooseOption: ''
  },
  {
    title: '英语',
    enTitle: 'English score',
    options: ['A', 'B', 'C', 'D', 'E'],
    subTitle: 'english',
    chooseOption: ''
  },
  {
    title: '政治',
    enTitle: 'Political achievemen',
    options: ['A', 'B', 'C', 'D', 'E'],
    subTitle: 'politics',
    chooseOption: ''
  },
  {
    title: '历史',
    enTitle: 'Historical achieveme',
    options: ['A', 'B', 'C', 'D', 'E'],
    subTitle: 'history',
    chooseOption: ''
  },
  {
    title: '地理',
    enTitle: 'Geographical achieve',
    options: ['A', 'B', 'C', 'D', 'E'],
    subTitle: 'geography',
    chooseOption: ''
  },
  {
    title: '物理',
    enTitle: 'Physical performance',
    options: ['A', 'B', 'C', 'D', 'E'],
    subTitle: 'physics',
    chooseOption: ''
  },
  {
    title: '化学',
    enTitle: 'Chemistry achievemen',
    options: ['A', 'B', 'C', 'D', 'E'],
    subTitle: 'chemical',
    chooseOption: ''
  },
  {
    title: '生物',
    enTitle: 'Biological achieveme',
    options: ['A', 'B', 'C', 'D', 'E'],
    subTitle: 'biology',
    chooseOption: ''
  },
  {
    title: '技术',
    enTitle: 'Technical achievemen',
    options: ['A', 'B', 'C', 'D', 'E'],
    subTitle: 'technology',
    chooseOption: ''
  }
]);
const projects = reactive([
  {
    name: '政治',
    active: false
  },
  {
    name: '地理',
    active: false
  },
  {
    name: '历史',
    active: false
  },
  {
    name: '生物',
    active: false
  },
  {
    name: '物理',
    active: false
  },
  {
    name: '化学',
    active: false
  },
  {
    name: '技术',
    active: false
  }
]);
onMounted(async () => {
 
});
//点击立即开始时判断是否登录，未登跳转登录,这需要走接口，目前先写弹窗了
const begin = () => {
  // token是否存在
  console.log(sessionStorage.getItem('PHONE-TOKEN'));
  if (sessionStorage.getItem('PHONE-TOKEN')) {
    show.value = false;
  } else {
     Dialog.confirm({
      title: '去登陆',
      message:
        '需要登陆才能进行操作,请先登陆',
    })
    .then(() => {
      // on confirm
      router.push({ path: '/loginPc', query: { path: '/smartRegistrationPc' } });
    })
    .catch(() => {
      // on cancel
    });
  }
};

const goToRecord = () => {
  if (sessionStorage.getItem('PHONE-TOKEN')) {
    router.push({ path: '/historyPc' });
  } else {
     Dialog.confirm({
      title: '去登陆',
      message:
        '需要登陆才能进行操作,请先登陆',
    })
      .then(() => {
        // on confirm
        router.push({ path: '/loginPc', query: { path: '/smartRegistrationPc' } });
      })
      .catch(() => {
        // on cancel
      });
  }
};

const changeOptions = (index1, project) => {
  console.log('我是token',sessionStorage.getItem('PHONE-TOKEN') )
  if (sessionStorage.getItem('PHONE-TOKEN')) {
    smartRegistration[index1].chooseOption = project;
  } else {
    // 给出提示框
    Dialog.confirm({
      title: '去登陆',
      message:
        '需要登陆才能进行操作,请先登陆',
    })
      .then(() => {
        // on confirm
        router.push({ path: '/loginPc', query: { path: '/smartRegistrationPc' } });
      })
      .catch(() => {
        // on cancel
      });
    
  }
};

const submit = () => {
  if (sessionStorage.getItem('PHONE-TOKEN')) {
    for (let i = 0; i < smartRegistration.length; i++) {
      if (smartRegistration[i].chooseOption == '') {
        Notify({
          type: 'warning',
          message: `请选择「${smartRegistration[i].title}」考试成绩`
        });
        return;
      }
    }
    if (currentItems.value.length < 3) {
      Notify({ type: 'warning', message: `请选择3项` });
      return false;
    }
    let options = {};
    smartRegistration.map((item, index) => {
      options[item.subTitle] = item.chooseOption.toLowerCase();
    });
    getIntelligent({
      token: sessionStorage.getItem('PHONE-TOKEN'),
      suject_one: currentItems.value[0],
      suject_two: currentItems.value[1],
      suject_three: currentItems.value[2],
      ...options
    }).then((res) => {
      console.log(res.result);
      router.push({
        path: '/listPc',
        query: { list: encodeURIComponent(JSON.stringify(res.result)) }
      });
    });
  } else {
     Dialog.confirm({
      title: '去登陆',
      message:
        '需要登陆才能进行操作,请先登陆',
    })
      .then(() => {
        // on confirm
        router.push({ path: '/loginPc', query: { path: '/smartRegistrationPc' } });
      })
      .catch(() => {
        // on cancel
      });
  }
};
const changeProject = (item) => {
  if (sessionStorage.getItem('PHONE-TOKEN')) {
    // 判断当前选中数组中是否包含,如果包含了则删除
    if (currentItems.value.includes(item)) {
      currentItems.value.splice(currentItems.value.indexOf(item), 1);
      projects.map((item1, index1) => {
        if (item == item1.name) {
          item1.active = false;
        }
      });
    } else {
      if (currentItems.value.length < 3) {
        currentItems.value.push(item);
      } else {
         Notify({ type: 'warning', message: '最多选择3项' });
      }
    }
    currentItems.value.map((item, index) => {
      projects.map((item1, index1) => {
        if (item == item1.name) {
          item1.active = true;
        }
      });
    });
  } else {
      Dialog.confirm({
      title: '去登陆',
      message:
        '需要登陆才能进行操作,请先登陆',
    })
      .then(() => {
        // on confirm
        router.push({ path: '/loginPc', query: { path: '/smartRegistrationPc' } });
      })
      .catch(() => {
        // on cancel
      });
  }
};
</script>

<style lang="less" scoped>
  .active {
    background: #cacdfe !important;
    color: #fff;
  }
.btn {
  cursor: pointer;
  width: 472Px;
  height: 45Px;
  background: linear-gradient(360deg, #4449ff 0%, #e1e2f8 100%);
  box-shadow: 0Px 1Px 5Px 0Px rgba(161, 146, 213, 0.58),
    inset 0Px 0Px 3Px 0Px rgba(255, 255, 255, 0.72);
  border-radius: 23Px;
  font-size: 18Px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 2Px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 64Px;
  margin-top: 64Px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rules {
  width: 1200Px;
  height: 421Px;
  background-image: url('../../assets/pc/zhineng.png');
  background-size: 100%;

  img {
    width: 100%;
    height: 100%;
  }
  .title {
    padding-top: 62Px;
    margin-left: 467Px;
    font-size: 55Px;
    font-family: PangMenZhengDao;
    color: #ffffff;
    line-height: 63Px;
    letter-spacing: 11Px;
    margin-bottom: 70Px;
  }
  p {
    font-size: 20Px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 30Px;
    margin-left: 150Px;
  }
}
.smartRegistration-wrap-item {
  padding: 0 12Px;
  display: flex;
  align-items: center;
  margin-bottom: 11Px;
  display: grid;
  grid-template-columns: auto 1fr;

  .smartRegistration-wrap-item-left {
    position: relative;
    border-right: 1Px solid #8c73ff;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 5Px;
    width: 130Px;

    .img {
      position: absolute;
      left: 0;
      top: 0;
      width: 70Px;
      height: 54Px;
    }

    .title {
      font-size: 18Px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 25Px;
      letter-spacing: 5Px;
      margin-bottom: 6Px;
      margin-top: 20Px;
    }

    .subtitle {
      font-size: 11Px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #c6c3ff;
      line-height: 16Px;
      white-space: nowrap;
    }
  }

  .smartRegistration-wrap-item-right {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    flex-grow: 1;
    img {
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: -1;
    }
    .content-wrap {
      padding: 0 0 0 18Px;
      display: flex;
      flex-wrap: wrap;
    }

    .content {
      cursor: pointer;
      width: 64Px;
      height: 23Px;
      background: transparent;
      border-radius: 2Px;
      border: 1Px solid #8c73ff;
      font-size: 12Px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #7456ff;
      line-height: 23Px;
      margin-right: 10Px;
      margin-bottom: 11Px;
      text-align: center;
    }
  }
}
.smartRegistration-tects {
  padding: 0 20Px;
  display: flex;
  grid-template-columns: 90Px 90Px 90Px;
  grid-template-rows: 49Px 49Px 49Px;
  grid-row-gap: 10Px;
  grid-column-gap: 50Px;

  .smartRegistration-tects-items {
    cursor: pointer;
    width: 90Px;
    height: 39Px;
    background: #ffffff;
    border-radius: 3Px;
    border: 1Px solid #8c73ff;
    font-size: 18Px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #7456ff;
    line-height: 25Px;
    text-align: center;
    line-height: 39Px;
  }
}
.tabdetial {
  .smartRegistration-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .smartRegistration-wrap {
    width: 45%;
  }
  .smartRegistration-wrap-title {
    padding: 0 18Px;
    display: flex;
    align-items: center;

    span {
      width: 3Px;
      height: 17Px;
      background: #8487e3;
      border-radius: 2Px;
      margin-right: 3Px;
    }

    font-size: 16Px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 22Px;
    letter-spacing: 4Px;
    margin-bottom: 16Px;
  }
  .box {
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
    .box-title {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    p {
      font-size: 18Px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 26Px;
      text-align: center;
      padding: 0 36Px;
      margin-bottom: 21Px;
    }
    .courseIntroduction-wrap {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 28Px;
      .left {
        .left-time {
          display: flex;
          align-items: center;
          margin-bottom: 8Px;

          .left-time1 {
            font-size: 14Px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 20Px;
            margin-right: 12Px;
          }
          .left-time2 {
            font-size: 14Px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 20Px;
          }
        }
      }
      .right {
        img {
          width: 57Px;
          height: 14Px;
        }
      }
    }
  }
  .courseIntroduction-detail {
    margin-top: 16Px;
    .title {
      font-size: 18Px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 25Px;
      margin-bottom: 16Px;
      position: relative;
      text-align: center;
      span {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 72Px;
        margin-left: -36Px;
        height: 6Px;
        z-index: -1;
        background: linear-gradient(360deg, #989aff 0%, #bac8ff 100%);
      }
    }
  }
  .wrap {
    position: relative;
    width: 1201Px;
    margin: 0 auto;
    .tabs {
      margin-top: 40Px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      .tabs-title {
        display: flex;
        align-items: center;
        font-size: 28Px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 40Px;
        margin-bottom: 3Px;
        span {
          width: 12Px;
          height: 12Px;
          background: #d8d8d8;
          border-radius: 12Px;
          margin: 0 32Px;
        }
      }
      .tabs-subTitle {
        font-size: 22Px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 30Px;
        margin-bottom: 37Px;
      }
    }
  }
  .banner-wrap {
    position: relative;
    width: 100vw;
    height: auto;
  }
  .banner {
    width: 100vw;
    height: auto;
    margin-bottom: 30Px;
  }
}
</style>
